import Swiper from "swiper"
import React, { FC, useEffect } from 'react'
import propTypes from "prop-types"
import "swiper/dist/css/swiper.css"

export const MySwipe:FC<{
  id:string,
  children:any,
  options?:object
}> = ({
  id,
  children,
  options,
}) => {

useEffect(()=>{
  // 插件实例化
  let thisSwiper = new Swiper("#"+id,{
    ...options,
    preventClicks:false,  
    observer:true,  // 开启动态检查器，监测swiper和slide
  })
},[])

  return (
    // 满足Swiper的静态结构
    <div className="swiper-container" id={id}>
        <div className="swiper-wrapper">
            {
              children
            }
        </div>
    </div>
  )
}

MySwipe.defaultProps = {
  id:"sbox",
  options:{
    autoplay:true,
    speed:1000
  }
}

MySwipe.propTypes = {
  id:propTypes.string,
  options:propTypes.object,
}

// 静态属性 又是一个组件
export const MySwipeItem:FC<{
  children:HTMLDivElement | any
}> = ({
  children
}) => {
 return(
  <div className="swiper-slide">
    {children}
  </div>
 )
}